<template>
	<view class="authority-content" >
		<!-- 角色列表 -->
		<view class="item">
			<view v-if="RolesList.length==0">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="请先添加成员" textSize="36"
					iconSize="60">
				</u-empty>
			</view>
			<!-- findByRoleId -->
			<view class="item-list u-flex-between" v-for="(item) in RolesList" :key="item.id" v-else>
				<view class="u-flex-between">
					<view class="item-list-img u-flex-center">
						<u-avatar :src="'https://sso.xcyunfu.com'+item.image" shape="square" size="100"></u-avatar>
					</view>
					<view class="item-list-role">
						<view class="role-info-name">
							{{item.roleName}}
						</view>
						<view class="role-info-num">
							员工人数：{{item.empNumber}}
						</view>
						<!-- <u-icon name="arrow-right"></u-icon> -->
					</view>
				</view>
				
				<view class="u-flex">
					<view class="item-list-edit u-flex-center" @click="handleRoleEmp(false,item)">
						<u-icon name="edit-pen-fill" color="#ffffff" size="36rpx"></u-icon>
					</view>
					<view class="item-list-deleted u-flex-center" @click="remoClick(item.id)">
						<u-icon name="trash" color="#ffffff" size="36rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="suspension">
			<view class="orangeBtn FlexRow" @click="handleRoleEmp(true)">
				新增角色
			</view>
		</view>
		
		<!-- 新增角色 -->
		<custompop
		ref="cuspop_addRole"
		:ptitle="isAdd ? '新增角色' : '修改角色'"
		@saveclick="addRole_save"
		>
			<template slot="content">
				<view class="popForm">
					<view class="form_line FlexBetween" >
						<view class="leftit">
							角色名称
						</view>
						<view class="right_area inputbox">
							<input type="text" placeholder="请输入角色名称"
							v-model.trim="addRoleForm.Role_Name"
							>
						</view>
					</view>  
					<view class="form_line FlexBetween" @click="selectYGRole">
						<view class="leftit">
							角色员工 
						</view>
						<view class="right_area selectBox FlexAlign">
							选择
							<view class="u-flex">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<view class="valtx">
						<view class="valtx-item u-flex-between" v-for="(value,index) in member_txt" :key="index">
							{{value}}
							<u-icon class="valtx-icon" name="close-circle" @click="delsVal(value)"></u-icon>
						</view>
						<!-- {{addRoleForm.member_txt}} -->
					</view>
				</view>
			</template>
		</custompop>
		<!-- 选择角色员工 -->
		<custompop
		ref="cuspop_selRole"
		ptitle="选择角色"
		:isselect="true"
		:ismultiple="true"
		:radioarr="roleselstr"
		@outputradio="outradio_CreateRole"
		>
		</custompop>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomBtn: {
					bottom: 0,
				},
				custAccId: '',
				acId: '',
				RolesList: [],
				removieId: '',
				emp_List: [],
				addRoleForm: {
					Role_Name: '',
					member_txt: '',
					memberIdList: [],
				},
				roleselstr: '',
				isAdd: '',
				roleEmpId: '',
				member_txt: [],
			};
		},
		onLoad() {
			this.getPullRefresh();
			this.bottomBtn.bottom = uni.getStorageSync('tabbarHeight');
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				this.custAccId = uni.getStorageSync('custAccid')
				this.acId = uni.getStorageSync('acId')
				this.get_Roles()
			},
			// 获取角色列表
			async get_Roles() {
				const res = await uni.$api.authority.getRoles({
					custAccId: this.custAccId,
				})
				this.RolesList = res.data
				uni.stopPullDownRefresh()
			},
			// 删除角色点击
			async remoClick(id) {
				this.show = true;
				this.removieId = id
				uni.showModal({
					content: '是否删除该角色？',
					confirmColor: "#fd7400",
					confirmText: '确认',
					success: res => {
						if (!res.confirm) return
						this.delRoleConfirm()
					}
				})
			},
			// 删除-请求
			async delRoleConfirm() {
				const res = await uni.$api.authority.removeRole(this.custAccId, this.acId, {
					roleId: this.removieId
				})
				uni.showToast({
					title: res.msg || '',
					icon: 'none'
				})
				this.get_Roles()
			},
			// 处理角色
			handleRoleEmp(bool,item = {}){
				console.log(item)
				this.addRoleForm = {
					Role_Name: !bool ? item.roleName : '',
					member_txt: '',
					memberIdList: [],
				}
				this.roleselstr = ''
				if(this.$refs.cuspop_addRole){
					this.$refs.cuspop_addRole.pupshow = true
				}
				this.isAdd = bool;
				this.roleEmpId = !bool ? item.id : '';
				this.member_txt = !bool ? item.emproles : [];
			},
			// 新增角色-保存
			async addRole_save(){
				this.addRoleForm.member_txt = this.member_txt.length ? this.member_txt.join('、') : '';
				let roName = this.addRoleForm.Role_Name || '';
				let zjEmp = this.addRoleForm.memberIdList || [];
				if(!roName) {
					this.$alertTost('请输入角色名称')
					return
				}
				if(this.isAdd == true) {
					if(!zjEmp.length) {
						this.$alertTost('请选择角色员工')
						return
					}
					const res = await uni.$api.authority.addEmp(this.acId,{
						zjEmpRole: {
							custAccId: this.custAccId,
							roName,
						},
						zjEmp,
					})
					console.log(res)
					if (res.code === 0) {
						uni.showToast({
							title: '新增成功',
							icon: 'none'
						})
					}
				}else if(this.isAdd == false){
					const res = await uni.$api.authority.editEmp(this.custAccId,this.acId, {
						role: {
							id: this.roleEmpId,
						    roName: roName
						},
						addAcIds: zjEmp.map(res => {
							return res.acId
						})
					})
					console.log(res)
					if (res.code === 0) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
					}
				}
				this.get_Roles()
			},
			// 选择员工
			selectYGRole(){
				this.get_EmpList()
			},
			// 选择员工-保存
			outradio_CreateRole(resArr){
				let zjEmpList = []
				let namelist = []
				for(let item of resArr) {
					let newEle = {
						acId: item.id,
					}
					zjEmpList.push(newEle)
					namelist.push(item.label)
				}
				this.member_txt = namelist;
				this.addRoleForm.memberIdList = zjEmpList
			},
			// 获取员工数据
			async get_EmpList() {
				if(!this.emp_List.length) {  // 没有数据
					const res = await uni.$api.authority.getEmpList({
						custAccId: this.custAccId
					})
					let cobj = res.data || []
					if(!cobj.length) return 
					for(let item of cobj){
						item.label = item.empName
					}
					this.emp_List = cobj
				}
				
				let r_list = JSON.parse(JSON.stringify(this.emp_List))
				for(let item of r_list) {
					this.$set(item, 'ischeck', false) 
				}
				this.roleselstr = JSON.stringify(r_list)
				if(this.$refs.cuspop_selRole){
					this.$refs.cuspop_selRole.pupshow = true
				}
			},
			// 删除选中员工
			delsVal(value) {
				const index = this.member_txt.indexOf(value);
				if(index != -1) {this.member_txt.splice(index, 1)};
			},
			
		}
	}
</script>

<style lang="scss">
	.authority-content {
		background: #fff3e885;
		min-height: 100vh;
	}
	.RoleBox {
		padding: 20rpx 40rpx;
		.RoleHead{
			margin-bottom: 40rpx;
			.RoleName{
				color: #000;
				font-size: 32rpx;
			}
		}
		.RoleBottom{
			.Employee{
				color: #808080;
				font-size: 24rpx;
			}
		}
	}
	.item {
		overflow: hidden;
		overflow-y: scroll;
		width: 100%;
		height: calc(100vh - (50px + 60rpx));
		position: relative;
		padding: 20rpx;
	}
			 
	.item-list {
		overflow: hidden;
		width: 100%;
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		
		.item-list-img {
			width: 140rpx;
			height: 140rpx;
		}
		
		.item-list-role {
			
			.role-info-name {
				font-size: 34rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.role-info-num {
				color: gray;
			}
		}
		
		.item-list-edit {
			height: 140rpx;
			width: 60rpx;
			background: #fd7400;
		}
		.item-list-deleted {
			height: 140rpx;
			width: 60rpx;
			background: #ff5733;
		}
	}
	
	.valtx {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding: 0 30rpx;
		
		.valtx-item {
			padding: 10rpx;
			margin: 10rpx;
			color: gray;;
			text-align: center;
			border: 1px solid gray;
			border-radius: 10rpx;
		}
		.valtx-icon {
			margin-left: 10rpx;
		}
	}
	
</style>